<template>
	<div class="circle-stat">
		<div :style="circleStyle" class="circle">
			<span class="circle-text">{{ number }}</span>
		</div>
		<p class="desc">{{ desc }}</p>
	</div>
</template>

<script>
	export default {
		name: 'CircleStat',
		props: {
			number: {
				type: Number,
				required: true
			},
			desc: {
				type: String,
				required: true
			},
			type: {
				type: String,
				default: '#409EFF'
			}
		},
		computed: {
			circleStyle() {
				const c = {
					primary: '#409EFF',
					success: '#67C23A',
					info: "#909399",
					warning: "#E6A23C",
					danger: "#F56C6C",
					error: "#F56C6C",
				};
				return {
					color: c[this.type] || this.type
				};
			}
		}
	};
</script>

<style scoped>
	.circle-stat {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
	}

	.circle {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 3px solid;
	}

	.circle-text {
		color: inherit;
		font-size: 1.2em;
	}

	.desc {
		margin-top: 8px;
		text-align: center;
		font-size: inherit;
	}
</style>